// flex布局
.flex {
	display: flex;
	flex-direction: row;
	align-items: center;
}
 
// 换行
.flex-wrap {
	flex-wrap: wrap;
}

// 反向换行
.flex-wrap-reverse {
	flex-wrap: wrap-reverse;
}

// 主轴起点对齐
.row-left {
	justify-content: flex-start;
}

// 主轴中间对齐
.row-center {
	justify-content: center;
}

// 主轴终点对齐
.row-right {
	justify-content: flex-end;
}

// 主轴等比间距
.row-between {
	justify-content: space-between;
}

// 主轴均分间距
.row-around {
	justify-content: space-around;
}

// 交叉轴起点对齐
.col-top {
	align-items: flex-start;
}

// 交叉轴中间对齐
.col-center {
	align-items: center;
}

// 交叉轴终点对齐
.col-bottom {
	align-items: flex-end;
}

// 交叉轴第一行文字基线对齐
.col-baseline {
	align-items: baseline;
}

// 交叉轴方向拉伸对齐
.col-stretch {
	align-items: stretch;
}


// 以下属于项目(子元素)的类

// 子元素交叉轴起点对齐
.flex-self-start {
	align-self: flex-start;
}

// 子元素交叉轴居中对齐
.flex-self-center {
	align-self: center;
}

// 子元素交叉轴终点对齐
.flex-self-end {
	align-self: flex-end;
}

// 子元素交叉轴第一行文字基线对齐
.flex-self-baseline {
	align-self: baseline;
}

// 子元素交叉轴方向拉伸对齐
.flex-self-stretch {
	align-self: stretch;
}

// 多轴交叉时的对齐方式

// 起点对齐
.flex-content-start {
	align-content: flex-start;
}

// 居中对齐
.flex-content-center {
	align-content: center;
}

// 终点对齐
.flex-content-end {
	align-content: flex-end;
}

// 两端对齐
.flex-content-between {
	align-content: space-between;
}

// 均分间距
.flex-content-around {
	align-content: space-around;
}

// 全部居中对齐
.flex-middle {
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center;
	align-content: center
}
.flex-col{
    display: flex;
    flex-direction: column;
}

// 是否可以放大
.flex-grow {
	flex-grow: 1
}

// 是否可以缩小
.flex-shrink {
	flex-shrink: 1
}

// 定义flex等分
.flex(12);
.flex(@n, @i: 1) when (@i =< @n) {
	.flex-@{i} {
		flex: @i;
  	}
    .flex(@n, (@i+1))
}

// 超出行数，自动显示行尾省略号，最多5行
.line-1{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.line(5);
.line(@n, @i: 2) when (@i =< @n) {
	.line-@{i}{
		display: -webkit-box !important;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: @i;
		-webkit-box-orient: vertical !important;
	}
    .line(@n, (@i+1))
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

//行高
.line-height(100);
.line-height(@n, @i: 12) when (@i =< @n) {
	.l-h-@{i} {
		line-height: @i+0px;
  	}
    .line-height(@n, (@i+1))
}

// 定义字体(px)单位
.font-size(50);
.font-size(@n, @i: 12) when (@i =< @n) {
    .font-@{i} {
        font-size: @i+0px;
    }
    .font-size(@n, (@i+1))
}
  
// 定义内外边距，历遍1-100
.distance(100);
.distance(@n, @i: 1) when (@i =< @n) {
    .m-@{i} {
        margin: @i + 0px;
    }
	.p-@{i} {
		padding: @i + 0px;
	}
	.m-l-@{i} {
        margin-left: @i + 0px;
    }
	.p-l-@{i} {
		padding-left: @i + 0px;
	}
	.m-t-@{i} {
        margin-top: @i + 0px;
    }
	.p-t-@{i} {
		padding-top: @i + 0px;
	}
	.m-r-@{i} {
        margin-right: @i + 0px;
    }
	.p-r-@{i} {
		padding-right: @i + 0px;
	}
	.m-b-@{i} {
        margin-bottom: @i + 0px;
    }
	.p-b-@{i} {
		padding-bottom: @i + 0px;
	}
    .distance(@n, (@i+1))
}

// 圆角
.b-r-50{
	border-radius:50%
}
.border-radius(20);
.border-radius(@n, @i: 1) when (@i =< @n) {
    .b-r-@{i} {
        border-radius: @i+0px;
    }
    .border-radius(@n, (@i+1))
}
.btnDiv{
	width: 170px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: #FC9D27;
	border-radius: 5px;
	font-size: 20px;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	cursor: pointer; 
}